<!-- 权限列表 -->
<template>
  <el-table
  :data="tableData"
  style="width: 100%;padding: 20px;"
  >
      <el-table-column prop="username" label="用户" width="200px">
      </el-table-column>
      <el-table-column label="权限" prop="power">
          <template #default="scope">
              <el-tag class="ml-2" type="danger" v-show="scope.row.limits.includes('管理员')">
                管理员
              </el-tag>
              <el-tag class="ml-2" type="info" v-show="scope.row.limits.includes('普通')">
                普通权限
              </el-tag>
          </template>
      </el-table-column>
      <el-table-column label="操作">
          <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">切换权限</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Limits, Del, Edit } from '@/api/http';

const store = useStore();

const tableData = ref([]);

// 获取用户权限信息
const getMessage = async () => {
  const { data } = await Limits();
  tableData.value = data;
};
onMounted(() => {
  getMessage();
  // console.log(tableData.value);
});

// 编辑信息
const handleEdit = async (row: any) => {
  // console.log('编辑信息');
  const res = await Edit(row.id, { ...row, limits: row.limits === '普通' ? '管理员' : '普通' });
  getMessage();
  console.log(res);
};

// 删除信息
const handleDelete = (row: any) => {
  // console.log('删除');

  ElMessageBox.confirm(
    '确定删除该用户吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      const res = await Del(row.id);
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功！',
        });
        getMessage();
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败！',
        });
      }
      getMessage();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};

</script>

<style scoped>
::v-deep .success-row{
    background-color: rgb(234, 235, 232);
}
</style>
